<script setup lang="ts">
import EquipmnetSheBei from '@/components/equipment/equipmnetSheBei.vue';
import Made from '@/components/equipment/Made.vue';
import ShiYEle from '@/components/equipment/ShiYEle.vue';
import Hometitle from '@/components/Home/title.vue'
import ZHometitle from '@/components/Home/ztitle.vue'
import { get_allPoliceData, get_equipmentTesting, get_SheBeitotal } from '@/request';
import { onMounted, ref } from 'vue';
const obj = ref(null)
const objs = ref(null)
const objes = ref(null)
// const tableData =ref(null)
const value = ref('100')
const invalue = ref('0')
onMounted(() => {
    get_SheBeitotal().then(resp => {
        console.log('设备统计', resp.data.data)
        obj.value = resp.data.data
    })
    get_equipmentTesting().then(resp => {
        console.log('设备检测', resp.data.data)
        objs.value = resp.data.data
    })
    get_allPoliceData().then(resp => {
        console.log('实时报警', resp.data.data)
        objes.value = resp.data.data
    })
})
</script>

<template>
    <div class="container">
        <div class="top"></div>
        <div class="left">
            <div class="leftTop">
                <Hometitle title="设备统计"></Hometitle>
                <div id="Shebeitotal">
                    <!-- <div class="total">
                        <img src="../../assets/images/total1.png" alt="">
                        <p>监控类</p>
                    </div>
                    <div class="total">
                        <img src="../../assets/images/total2.png" alt="">
                        <p>消防类</p>
                    </div>
                    <div class="total">
                        <img src="../../assets/images/total3.png" alt="">
                        <p>其他类</p>
                    </div> -->
                    <EquipmnetSheBei></equipmnetSheBei>
                </div>
            </div>
            <div class="leftcenter">
                <Hometitle title="实时用电"></Hometitle>
                <div id="ShiEle">
                    <div class="ShiEle1">
                        <div class="ele">
                            <div class="ele1">
                                <p class="pp"></p>
                                <p>
                                    <b>72670</b><br>
                                    <span>总用电量（kW）</span>
                                </p>
                            </div>
                            <div class="ele2">
                                <p class="pp"></p>
                                <p>
                                    <b>72670</b><br>
                                    <span>总用水量（kW/h）</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="ShiEle2">
                        <ShiYEle></ShiYEle>
                    </div>
                </div>
            </div>
            <div class="leftBottom">
                <Hometitle title="场地使用"></Hometitle>
                <div id="Made">
                    <Made></Made>
                </div>
            </div>
        </div>
        <div class="center">
            <div style="margin: 80px 0 0 10px;height: 600px;">
                <DiEart style="width: 100%;height: 100%;"></DiEart>
            </div>
            <div class="footer">
                <footernav></footernav>
            </div>

        </div>
        <div class="right">
            <div class="rightTop">
                <ZHometitle title="设备检测"></ZHometitle>
                <div id="SheBeiJiance">
                    <div class="div1">
                        <img src="../../assets/images/PhotoZuo.png" alt="">
                    </div>
                    <div class="div1">
                        <img src="../../assets/images/zu.png" alt="">
                    </div>
                </div>
                <div id="SheBeimm">
                    <!-- <el-table :data="objs" style="width: 100%;height:100%;background: #0930a6;">
                        <el-table-column  prop="ettg_serial" label="序号" width="80" />
                        <el-table-column prop="ettg_type" label="设备名称" width="180" />
                        <el-table-column prop="ettg_status" label="设备状态" width="150">
                            <el-switch v-model="value" 
                                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #eee"
                                    active-value="ettg_status" inactive-value="!ettg_status" />
                        </el-table-column>

                    </el-table> -->

                    <div style="color: #fff; display: flex;
                    justify-content: space-around; width: 100%;
                    height:5vh;line-height: 5vh;background-color: #0930a6;">
                        <p>序号</p>
                        <p>设备名称</p>
                        <p>设备状态</p>
                    </div>
                    <div class="zhi" v-for="item in objs" :key="item">
                        <p>{{ item.ettg_serial }}</p>
                        <p>{{ item.ettg_type }}</p>
                        <p>
                            {{ item.ettg_status }}</p>
                    </div>

                </div>
            </div>
            <div class="rightBottom">
                <ZHometitle title="实时警报"></ZHometitle>
                <div style="color: #fff; display: flex;
                    justify-content: space-around; width: 100%;
                    height:4vh;line-height: 4vh;background-color: #0930a6;">
                    <p>序号</p>
                    <p>设备名称</p>
                    <p>设备状态</p>
                </div>
                <div id="ShiShiJinBao">

                    <div class="zhi1" v-for="item in objes" :key="item">
                        <p>{{ item.serial }}</p>
                        <p>{{ item.clpe_place }}</p>
                        <p>{{ item.clpe_collPolice }}</p>

                        <!-- <p>{{ item.eegs_dutyContent }}</p>
                        <p>{{ item.eegs_phone }}</p> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container {
    position: relative;
    background-image: url('../../assets/images/pageBg.png');
    display: flex;

    .top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background-image: url('../../assets/images/Top.png');
        background-size: 100% 80px;
        background-repeat: no-repeat;

    }

    .left {
        width: 32%;
        height: 100vh;
        background-image: url('../../assets/images/Left.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .leftTop {
            margin: 60px 80px 0px 70px;
            height: 16vh;

            #Shebeitotal {
                width: 100%;
                height: 11vh;
                border: 1px #7161e9 solid;
                display: flex;
                color: #ddd;
                line-height: 3vh;
                justify-content: space-around;

                img {
                    width: 100%;
                    margin-top: 10px;
                    height: 45%;
                }
            }
        }

        .leftcenter {
            margin: 20px 80px 0px 70px;
            height: 38vh;

            #ShiEle {
                width: 100%;
                height: 38vh;
                border: 1px #7161e9 solid;

                .ShiEle1 {
                    width: 100%;
                    height: 7vh;
                    border: #7161e9 solid 1px;
                    display: flex;
                    justify-content: space-around;

                    .ele {
                        width: 100%;
                        height: 7vh;
                        display: flex;
                        color: #ddd;

                        .ele1 {
                            width: 45%;
                            height: 70%;
                            border: #7161e9 solid 1px;
                            padding: 10px;
                            display: flex;
                            margin-right: 10px;
                            justify-content: space-around;

                            .pp {
                                width: 60px;
                                height: 50px;
                                background-image: url('../../assets/images/ele.png');
                                background-repeat: no-repeat;
                                background-size: 80% 90%;

                            }

                            b {
                                font-size: 28px;
                                font-weight: 400;
                            }
                        }

                        .ele2 {
                            width: 45%;
                            height: 70%;
                            padding: 10px;
                            display: flex;
                            border: #7161e9 solid 1px;
                            justify-content: space-around;

                            .pp {
                                width: 60px;
                                height: 50px;
                                background-image: url('../../assets/images/ele.png');
                                background-repeat: no-repeat;
                                background-size: 80% 90%;
                            }

                            b {
                                font-size: 28px;
                                font-weight: 400;
                            }
                        }
                    }

                }

                .ShiEle2 {
                    width: 100%;
                    height: 30vh;
                    border: #7161e9 solid 1px;
                }
            }
        }

        .leftBottom {
            margin: 80px 80px 0px 70px;
            height: 25vh;

            #Made {
                width: 100%;
                height: 22vh;
                border: #7161e9 solid 1px;
            }

        }
    }

    .center {
        width: 36%;
        height: 100vh;
        position: relative;

        .footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 65px;
        }
    }

    .right {
        width: 32%;
        height: 100vh;
        background-image: url('../../assets/images/Right.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .rightTop {
            margin: 60px 60px 0px 70px;
            height: 56vh;

            #SheBeiJiance {
                width: 100%;
                height: 14vh;
                border: #7161e9 solid 1px;
                margin-bottom: 20px;
                display: flex;
                justify-content: space-around;
                padding-top: 30px;


            }

            #SheBeimm {
                width: 100%;
                height: 33vh;
                border: #7161e9 solid 1px;

                .zhi {
                    width: 100%;
                    height: 4vh;
                    line-height: 4vh;
                    background-color: #05014c;
                    display: flex;
                    color: #fff;
                    justify-content: space-around;
                }
            }
        }

        .rightBottom {
            margin: 20px 60px 0px 70px;
            height: 24vh;

            #ShiShiJinBao {
                width: 100%;
                height: 24vh;
                color: #fff;
                border: #7161e9 solid 1px;
                overflow: scroll;
                /* 允许滚动 */
                scrollbar-width: none;

                .zhi1 {
                    width: 100%;
                    height: 4vh;
                    line-height: 4vh;
                    background-color: #05014c;
                    display: flex;
                    color: #fff;
                    justify-content: space-around;
                }
            }
        }
    }
}
</style>
